<template>
  <div id="register">
    <div class="register-box" id="registerForm">
      <div class="register-rg">
        <h3>注册账号</h3>
        <div class="form-box">
          <div>
            <label><i class="iconfont">&#xe769;</i></label>
            <input type="text" placeholder="邮箱" v-model="info.receiver" name="receiver" ref="receiver"
                   @blur="handleBlur"/>
            <span class="hiden" ref="receiver_empty">邮箱不能为空</span>
            <span class="hiden" ref="receiver_span">您输入的邮箱格式有误</span>
          </div>
          <div>
            <label><i class="iconfont">&#xe7af;</i></label>
            <input type="text" placeholder="验证码" v-model="info.code" name="code" ref="code" class="code-input"
                   @blur="handleBlur"/>
            <span :class="handeleCode?'verification-active':'verification-code'"
                  @click="getCode">{{phoneCodemsg}}</span>
            <span class="hiden" ref="code_empty">验证码不能为空</span>
            <span class="hiden" ref="code_span">验证码不能为空</span>
          </div>
          <div>
            <label><i class="iconfont">&#xe614;</i></label>
            <input type="password" placeholder="新密码" v-model="info.password" name="password" ref="password"
                   @blur="handleBlur"/>
            <span class="hiden" ref="password_empty">密码不能为空</span>
            <span class="hiden" ref="password_span">密码必须由6-16位字母和数字组成</span>
          </div>
          <span class="login-jump">
           <span @click="handlejump()">已有账号？直接去<em>登录</em></span>
        </span>
          <div class="submit marginTop20" @click="handleRegister">注册</div>
          <p>注册即代表你同意《1dollar.bet用户协议》</p>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
  import Api from '@/axios/api/api'

  let rejson = {
    password: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/,
    receiver: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
    code: /\S/
  }
  export default {
    name: 'register',
    data() {
      return {
        info: {
          receiver: '',
          password: '',
          code: ''
        },
        codeTimer: null,
        handeleCode: false,
        phoneCodemsg: '发送验证码',
        countdown: 60
      }
    },
    created() {
      localStorage.clear()
    },
    methods: {
      getCode() {
        let self = this
        if (self.countdown !== 60) return false
        if (!self.info.receiver) {
          this.$refs.receiver_span.className = 'hiden'
          this.$refs.receiver_empty.className = 'errShow'
        } else if (!rejson.receiver.test(this.info.receiver)) {
          this.$refs.receiver_empty.className = 'hiden'
          this.$refs.receiver_span.className = 'errShow'
        } else {
          let params = {
            receiver: this.info.receiver
          }
          self.handleCountdown()
          Api.sendCode(params).then(res => {
            let result = res.data
            if (result.code === 0) {
              this.$message.success('发送成功')
              self.handleCountdown()
            } else {
              this.$message.error(result.message)
            }
          })
        }
      },
      handleCountdown() {
        let self = this
        if (self.countdown !== 60) return false
        self.handeleCode = !self.handeleCode
        if (!self.handeleCode) return false
        self.phoneCodemsg = self.countdown + 's后重新获取'
        clearInterval(self.codeTimer)
        self.codeTimer = setInterval(() => {
          self.countdown = self.countdown - 1
          if (self.countdown > 0) {
            self.phoneCodemsg = self.countdown + 's后重新获取'
          } else {
            self.countdown = 60
            self.phoneCodemsg = '发送验证码'
            self.handeleCode = false
            clearInterval(self.codeTimer)
          }
        }, 1000)
      },
      handleBlur(event) {
        let currentEl = event.target.name
        let currentVal = event.target.value
        if (currentVal) {
          this.$refs[currentEl + '_empty'].className = 'hiden'
          this.$refs[currentEl + '_span'].className = 'hiden'
          if (rejson[currentEl]) {
            if (rejson[currentEl].test(event.target.value)) {
              this.$refs[currentEl + '_span'].className = 'hiden'
            } else {
              this.$refs[currentEl + '_span'].className = 'errShow'
            }
          }
        } else {
          this.$refs[currentEl + '_empty'].className = 'errShow'
        }
      },
      handleRegister() {
        let bOk = true
        for (let name in rejson) {
          if (this.info[name] !== '') {
            this.$refs[name + '_empty'].className = 'hiden'
            this.$refs[name + '_span'].className = 'hiden'
            if (!rejson[name].test(this.info[name])) {
              this.$refs[name + '_span'].className = 'errShow'
              bOk = false
            } else {
              this.$refs[name + '_span'].className = 'hiden'
            }
          } else {
            bOk = false
            this.$refs[name + '_empty'].className = 'errShow'
          }
        }
        if (!bOk) {
          return false
        }
        // inviteCode
        Api.register(this.info).then(res => {
          let result = res.data
          if (result.code === 0) {
            localStorage.setItem('token', result.data)
            this.$message.success('注册成功')
            this.$router.push({
              path: '/login'
            })
          } else {
            this.$message.error(result.message)
          }
        })
      },
      handlejump() {
        this.$router.push({
          path: '/login'
        })
      },
      resizeChange() {
        let oW = document.body.clientWidth
        let oFrom = document.getElementById('registerForm')
        if (oW < 1500) {
          oFrom.className = 'register-box-min'
        } else {
          oFrom.className = 'register-box'
        }
      }
    },
    mounted() {
      let vm = this
      vm.resizeChange()
      window.onresize = function () {
        vm.resizeChange()
      }
    }
  }
</script>

<style scoped lang="less">
  #register {
    width: 100%;
    height: 100%;
    min-width: 1200px;
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    background: #fff;
    position: relative;
    .register-box, .register-box-min {
      width: 1200px;
      height: 700px;
      display: block;
      overflow: hidden;
      background: #FFFFFF;
      box-shadow: 0 2px 21px 0 rgba(215, 199, 238, 0.50);
      border-radius: 30px;
      background-image: url(../../assets/image/register.png);
      background-repeat: no-repeat;
      background-size: 50%;
      position: absolute;
      left: 0;
      margin: auto auto;
      top: 0;
      bottom: 0;
      right: 0;
    }
    .register-box {
      transform: scale(1);
    }
    .register-box-min {
      transform: scale(.75);
    }
    .register-rg {
      width: 638px;
      float: right;
      padding-left: 100px;
      padding-right: 220px;
      padding-top: 78px;
      box-sizing: border-box;
      > h3 {
        width: 100%;
        height: 56px;
        line-height: 56px;
        font-family: PingFangSC-Medium;
        font-size: 40px;
        color: #000000;
        text-align: left;
        display: block;
        overflow: hidden;
        font-weight: bold;
        letter-spacing: 6px;
        margin-bottom: 64px;
      }
      .login-jump {
        width: 100%;
        height: 20px;
        margin: 20px 0;
        display: block;
        overflow: hidden;
        text-align: left;
        font-family: PingFangSC-Regular;
        font-size: 20px;
        color: #A9A9A9;
        span {
          cursor: pointer;
          > em {
            color: #5117FD;
          }
        }

      }
      p {
        width: 100%;
        height: 22px;
        line-height: 22px;
        display: block;
        overflow: hidden;
        margin-top: 20px;
        font-family: PingFangSC-Regular;
        font-size: 16px;
        color: #A9A9A9;
        text-align: center;
      }
    }

  }
</style>
